<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <Find :searchImg="false" :OriginalFilter="{ static: true }" :formList="formList2" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">订单船务作业</h1>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
          @currentRow1="dbCurrentRow"
        />
      </el-card>
    </div>

    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <h1 class="f16">选择外发指令</h1>
            <Table
              :tableHeader="tableHeader10"
              :tableData="tableData10"
              selection
              class="mt10"
              :outTableHeight="150"
              @selectList="selectTableList10"
              @currentRow="currentRow10"
            />
          </el-card>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import formDataReq from '@/utils/formDataReq'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TestModuleTwo'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '工厂',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '工厂指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'date',
    dateLabel: '出货日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '客人发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '报关发票号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'input',
    inputPlaceholder: '起运港-目的港',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '出口类型',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'dateSingle',
    dateLabel: '船期',
    dateValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '信用证号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '交单日期',
    dateValue: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '状态',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  }
]) as any

const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '信用证号',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'dateSingle',
    dateLabel: '交单日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '填充'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  },
  {
    type: 'button',
    checkboxLabel: '其他应收'
  }
]) as any

// 表一模块
const tableHeader = ref([
  {
    prop: 'orderType',
    label: '类型'
  },
  {
    prop: 'invoiceNo',
    label: '发票号'
  },
  {
    prop: 'outDate',
    label: '出厂日期'
  },
  {
    prop: 'currency',
    label: '币种'
  },
  {
    prop: 'outPair',
    label: '出货数量'
  },
  {
    prop: 'premium',
    label: '添加港口单价'
  },
  {
    prop: 'outAmt',
    label: '出货金额'
  },
  {
    prop: 'additionalCost',
    label: '附加费用'
  },
  {
    prop: 'customsInvNo',
    label: '报关发票号'
  },
  {
    prop: 'custInvNo',
    label: '客人发票号'
  },
  {
    prop: 'destPort',
    label: '起运港-目的港'
  },
  {
    prop: 'exportType',
    label: '出口类型'
  },
  {
    prop: 'shipDate',
    label: '船期'
  },
  {
    prop: 'payDays',
    label: '账期'
  },
  {
    prop: 'arDate',
    label: '应收款日期'
  },
  {
    prop: 'arType',
    label: '收款类型'
  },
  {
    prop: 'arAmt',
    label: '收款金额'
  },
  {
    prop: 'remark',
    label: '备注'
  },
  {
    prop: 'creditNo',
    label: '信用证号'
  },
  {
    prop: 'deliveryDate',
    label: '交单日期'
  },
  {
    prop: 'cfmFlag',
    label: '检核'
  },
  {
    prop: 'sysUser',
    label: '建档人员'
  },
  {
    prop: 'sysDate',
    label: '建档日期'
  },
  {
    prop: 'deliveryDate',
    label: '操作'
  }
])
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableData = ref([])
const imgList = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  },
  {
    index: 2,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let formData = new FormData()
  formData.append(
    'params[beginTime]',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
      .dateValue?.[0] || ''
  )
  formData.append(
    'params[endTime]',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '出货日期')
      ?.dateValue?.[1] || ''
  )
  formData.append(
    'invoiceNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '发票号'
    )?.inputValue
  )
  formData.append(
    'custom',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂')?.selectValue
  )
  formData.append(
    'factoryLotNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '工厂指令'
    )?.inputValue
  )
  formData.append(
    'orderType',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '类型')?.selectValue
  )
  formData.append(
    'custInvNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '客人发票号'
    )?.inputValue
  )
  formData.append(
    'customsInvNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '报关发票号'
    )?.inputValue
  )
  formData.append(
    'destPort',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '起运港-目的港'
    )?.inputValue
  )
  formData.append(
    'exportType',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '出口类型')?.selectValue
  )
  formData.append(
    'shipDate',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '船期')?.dateValue ||
      ''
  )
  formData.append(
    'creditNo',
    formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '信用证号'
    )?.inputValue
  )
  formData.append(
    'deliveryDate',
    formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '交单日期')
      ?.dateValue || ''
  )
  formData.append(
    'cfmFlag',
    formList.value.find((item: any) => item.selectP && Jzhcn.Find[item.selectP.split('.')[1] as keyof typeof Jzhcn.Find] === '状态')?.selectValue
  )
  formData.append('pageNum', String(currentPage.value))
  formData.append('pageSize', String(pageSize.value))
  let tableDataList = await formDataReq.post<any, any>('/board/queryBoard', formData)
  isLoading.value = false
  tableData.value = tableDataList.data.list.map((item: any) => {
    return item
  })
  total.value = tableDataList.data.total
  summaryData.value[0].num = tableDataList.sum[0].orderCount
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
}

// 双击当前行
const dbCurrentRow = () => {
  drawer.value = true
}
const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入序号',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入外加工项目',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '插入'
  }
])
const drawer = ref(false)
const findClicked10 = async (content: string) => {}
const tableHeader10 = ref([
  {
    label: '客人PI',
    prop: 'customPiNo'
  },
  {
    label: '工厂',
    prop: 'factory'
  },
  {
    label: '工厂指令',
    prop: 'factoryLotNo'
  },
  {
    label: '订单数量',
    prop: 'orderQty'
  },
  {
    label: '柜号',
    prop: 'containerNo'
  },
  {
    label: '出货数量',
    prop: 'outQty'
  },
  {
    label: '单价',
    prop: 'custPrice'
  },
  {
    label: '加价',
    prop: 'addPrice'
  },
  {
    label: '币种',
    prop: 'factoryCur'
  },
  {
    label: '金额',
    prop: 'amount'
  },
  {
    label: '型体',
    prop: 'styleNo'
  },
  {
    label: '颜色',
    prop: 'colorName'
  },
  {
    label: '颜色代号',
    prop: 'colorCode'
  },
  {
    label: '品牌',
    prop: 'invoiceNo'
  },
  {
    label: '鞋名',
    prop: 'styleName'
  },
  {
    label: '客户型体',
    prop: 'custStyle'
  },
  {
    label: '季度',
    prop: 'season'
  },
  {
    label: '交期',
    prop: 'deliveryDate'
  }
])
const tableData10 = ref([])
const selectedLists10 = ref([])
const selectTableList10 = (selectedList: any) => {
  selectedLists10.value = selectedList
}
const currentTable10Row = ref({}) as any
const currentRow10 = async (row: any = tableData10.value[0]) => {
  currentTable10Row.value = row
  let table10Data = await service.post<any, any>(`/Outgoing/getNumberDetailsList`, row)
  tableData10.value = table10Data
}
</script>

<style lang="less" scoped></style>
